<template>
  <div id="app">
    <div class="main">
      <transition :name="transitionName">
        <router-view class="appBox" />
      </transition>
      <!-- {{$loadingRouteData}} -->
    </div>

    <Footer />
  </div>
</template>

<script>
import "../flexible.js";
import Footer from "./components/footer/index.vue";
export default {
  components: {
    Footer,
  },
  name: "App",
  data() {
    return {
      transitionName: "slide-left",
    };
  },
  watch: {
    $route(to, from) {
      // 去的index比来的大，要跳的路由在右边
      // console.log(to);
      // console.log(to.hidden);
      if(!to.meta.name || !from.meta.name){
        // this.transitionName = "tan-left";
        this.transitionName = "";
        // if (to.meta.nowIndex > from.meta.nowIndex) {
          // 动画从左到右
          // this.transitionName = "slide-right";
        // } else {
        //   this.transitionName = "slide-left";
        // }
      }else{
        if (to.meta.nowIndex > from.meta.nowIndex) {
          // 动画从左到右
          this.transitionName = "slide-left";
        } else {
          this.transitionName = "slide-right";
        }
      }
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
.main {
  width: 100vw;
  /* height: 16.2968rem; */
  height: calc(100vh - 1.493333rem);
}
#app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.appBox {
  position: fixed;
  width: 100vw;
  z-index: 10;
  transition: 0.3s all;
}
.slide-left-enter, .slide-right-leave-to{
 -webkit-transform:translate(100%,0);
  transform:translate(100%,0);
}

.slide-left-leave-to, .slide-right-enter{
   -webkit-transform:translate(-100%,0);
  transform:translate(-100%,0);
}
.tan-left-enter, .tan-right-leave-to{
 -webkit-transform:translate(100%,0);
  transform:translate(100%,0);
}

.tan-left-leave-to, .tan-right-enter{
   -webkit-transform:translate(-100%,0);
  transform:translate(-100%,0);
}
/* .footer{
    width: 100vw;
    line-height: 1.493333rem;
    position: fixed;
    bottom: 0;
    left: 0;
    background: white;
} */
</style>
